<template>
    <div>
        <el-button type="primary" @click="dialogFormVisible = true; operataType = 'save'" style="margin-bottom: 20px;display: inline-block;">添加信息</el-button>
        <el-dialog title="搜索信息" :visible.sync="dialogFormVisible" @close="handleClose" style="text-align: center;">
        <el-form :model="search">
            <el-form-item label="搜索编号" :label-width="formLabelWidth" v-if="operataType == 'save'">
                <el-input v-model="search.id" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="检索文字" :label-width="formLabelWidth">
                <el-input v-model="search.search_words" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="数量" :label-width="formLabelWidth">
                <el-input v-model="search.num" autocomplete="off"></el-input>
            </el-form-item>
            <!-- <el-form-item label="搜索时间" :label-width="formLabelWidth">
                <el-input v-model="search.search_time" show-password auto-complete="off" autocomplete="off"></el-input>
            </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleSave">确 定</el-button>
        </div>
        </el-dialog>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-input v-model="searchk" placeholder="请输入内容" style="width: 300px ;"></el-input>
    <el-button class="el-button1" type="primary" @click="loadOrderLike">提交</el-button>

       </el-form>
        <el-table
            border
            stripe
            :data="searchs"
             max-height="500"
            style="width: 100%">
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>

            <el-table-column
                label="搜索编号"
                width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="检索文字"
                width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.search_words }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="数量"
                width="100">
                <template slot-scope="scope">
                    <span>{{ scope.row.num }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="搜索时间"
                >
                <template slot-scope="scope">
                    <span>{{ scope.row.search_time }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right" width="150">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            style="margin-top: 20px;"
            background
            layout="prev, pager, next"
            :total="total"
            :page-size = "pageSize"
            :current-page ="current"
            @current-change="loadOrder"
           >
        </el-pagination>
    </div>
</template>
<script>
    export default {
    name: "SearchHistoryView",
    name: "OrderView",
    data() {
        return {

            //搜索列表
            searchs: [],
            dialogFormVisible: false, //控制对话框的显示
            formLabelWidth:'120px',
            search:{id:'', search_words:'', num:'', search_time:''},//搜索数据
            searchk:'',
            operataType:'',//操作类型  save  update
            total:0,//用户总数
            pageSize:10,//每页行数
            current:0,//当前页数
        }
    },
    methods:{
        //加载函数
        loadOrder(current){
            this.current = current
                this.$http.post('search?action=page', this.$qs.stringify({
                    pageSize: this.pageSize,
                    current: this.current
                }))
                    .then(resp => {
                        //处理后台返回的结果
                        console.log(resp.data)
                        //数据绑定
                        if(resp.data.data){
                            this.total = resp.data.data.total
                            this.searchs = resp.data.data.records
                        }
                    })
            },
            loadOrderLike(){
                this.pageSize = 10
                this.current = 1
                this.$http.post('search?action=pageByLike', this.$qs.stringify({
                    pageSize: this.pageSize,
                    current: this.current,
                    k:this.searchk
                }))
                    .then(resp => {
                        //处理后台返回的结果
                        console.log(resp.data)
                        //数据绑定
                        if(resp.data.data){
                            this.total = resp.data.data.total
                            this.searchs = resp.data.data.records
                        }
                    })
            },
            handleEdit(index, row) {
                this.operataType = 'update';
                this.dialogFormVisible = true;
                console.log(index, row);
                this.search = JSON.parse(JSON.stringify(row))
            },
            handleDelete(index, row) {
                console.log(index, row);
                this.$confirm('是否确定删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.post('/search?action=delete&id='+ row.id)
                    .then(resp => {
                        if(resp.data.data == true){
                            this.loadOrder(this.current);
                            this.$message({
                                type:'success',
                                message:'删除成功'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type:'info',
                        message:'已取消删除'
                    });
                })    
            },
            handleSave(){
                if(this.operataType == 'save'){
                    console.log('save search');
                    this.$http.post('search?action=save',this.$qs.stringify(this.search))
                    .then(resp => {
                        console.log('save search', resp.data)
                        if(resp.data.data == true){
                            this.loadOrder(this.current);
                        }
                    })
                } else {
                    console.log('update order');
                    this.$http.post('search?action=update',this.$qs.stringify(this.search))
                    .then(resp => {
                        console.log('update order', resp.data)
                        if(resp.data.data == true){
                            this.loadOrder(this.current);
                        }
                    })
                }
                this.dialogFormVisible = false
            },
            handleClose(){
                console.log();
                this.search = {id:'', search_words:'', num:'', search_time:''}
                this.operataType = ''
            }
    },
    
    //页面挂载钩子
    mounted(){
        this.loadOrder(1)
    }
}
</script>
<style scoped>
/deep/ .el-input__inner{
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;

}
/deep/ .el-button1{
border-top-left-radius:0px ;
border-bottom-left-radius: 0px;
}
.demo-form-inline{
    display: inline-block;
    float:right;
}
</style>
